﻿@page
@model WebEasyUI.Pages.Views.DynamicExpressionIndexModel
@{
}
<style type="text/css">
    .form {
        padding: 5px;
        height: 50px;
    }

    .form_elem {
        display: block;
    }

        .form_elem div {
            padding: 5px;
            float: left;
        }

    .detailall, .fullbid, .editall, .operateStart {
        display: none;
    }


    .faileall {
        display: none;
    }
</style>

<div data-options="region:'north'" class="form">
    <form class="form_elem">
        <div>
            表名：<input id="tableName" name="tableName" class="easyui-combobox">
            表字段：<input id="filed" name="filed" class="easyui-combogrid">
            Product表条件：<input id="ProductCondition" name="condition" class="easyui-textbox" style="width:500px">
            ProductColor表条件：<input id="ProductColorCondition" name="condition" class="easyui-textbox" style="width:500px">
        </div>
       

        <br> <br> <br>
        <div>
            <button type="button" id="search" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</button>
            <button type="button" id="clear" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">清空</button>
        </div>
    </form>
</div>
<br>
<br>
<br>
<br>
<div data-options="region:'center'">
    <table id="dg"></table>
</div>



@section Scripts{

    <script type="text/javascript">
        $(function () {
            var tableNams = {};

            $(function () {
                $('#tableName').combobox({
                    url: '/api/ExpressionApplication/GetTables',
                    valueField: 'id',
                    textField: 'text',
                    onSelect: function (record) {
                        var url = '/api/ExpressionApplication/GetTablePropertystring?tableName=' + record.text;
                        $('#filed').combogrid({
                            panelWidth: 450,
                            //value: '006',
                            idField: 'propertyName',
                            textField: 'propertyName',
                            url: url,
                            columns: [[
                                { field: 'propertyName', title: '属性名称', width: 100 },
                                { field: 'propertyType', title: '属性类型', width: 100 },
                                { field: 'propertySummary', title: '属性备注', width: 100 }
                            ]]
                        });
                    },
                    onLoadSuccess: function () {
                        tableNams = $('#tableName').combobox('getData');//获取所有下拉框数据
                        if (tableNams.length > 0) {
                            //如果有数据的话默认选中第一条数据
                            $('#tableName').combobox('select', tableNams[0].text);
                        }
                    }

                });


                $('#filed').combogrid({
                    panelWidth: 450,
                    //value: '006',
                    idField: 'propertyName',
                    textField: 'propertyName',
                    url: '/api/ExpressionApplication/GetTablePropertystring?tableName=ProductColor',
                    columns: [[
                        { field: 'propertyName', title: '属性名称', width: 100 },
                        { field: 'propertyTypeName', title: '属性类型', width: 100 },
                        { field: 'propertySummary', title: '属性备注', width: 100 }
                    ]]
                });
            });



        });

        $("#search").click(function () {
            var objList = {};
            var expressionBuilders = [];
            var obj = {};
            obj["TableName"] = "Product";
            obj["Expression"] = $("#ProductCondition").textbox('getText');
            expressionBuilders[0] = obj;
            var obj1 = {};
            obj1["TableName"] = "ProductColor";
            obj1["Expression"] = $("#ProductColorCondition").textbox('getText');
            expressionBuilders[1] = obj1;
            objList.Data = expressionBuilders;
            $("#dg").datagrid("reload", objList);
        });

        $("#clear").click(function () {
            $(".form_elem .easyui-textbox").textbox("clear");
            $(".form_elem select").combobox("clear");
            return false;
        });

        var columns = [[
            { title: '全选', field: 'ck', checkbox: true, sortable: false, width: 100 },  //添加checkbox
            { field: 'id', title: '主键 (Product.ID) ', width: 100, /*hidden: true*/ },
            { field: 'productName', title: '产品名称(Product.ProductName) ', width: 100 },
            { field: 'colorName', title: '色号名称(ProductColor.ColorName)', width: 100 },
            { field: 'colorDesc', title: '色号描述(ProductColor.ColorDesc)', width: 100 },
            { field: 'createDate', title: '产品创建时间(Product.CreateTime)', width: 100 },
        ]];



        $('#dg').datagrid({
            url: '/api/ExpressionApplication/ProductByDynamicExpression',
            columns: columns,
            height: 'auto',
            //data: dataJson,
            striped: true, //设置为 true，则把行条纹化。（即奇偶行使用不同背景色）
            //toolbar: toolbar,
            fitColumns: true,
            idField: "ID",
            singleSelect: true, //设置为 true，则只允许选中一行。
            rownumbers: true,//设置为 true，则显示带有行号的列
            checkbox: true, //设置为 true，则显示复选框
            checkOnSelect: true, //如果设置为 true，当用户点击某一行时，则会选中/ 取消选中复选框checkbox
            loadMsg: "正在加载数据中...",
            pagination: true,//分页控件
            rownumbers: true,
            pageSize: 5,
            pageList: [5, 10, 20],
            onDblClickCell: function (index, field, value) {
                $('#dg').editRow(index);
            }
        });



        //当分页时运行
        var pager = $("#dg").datagrid("getPager");
        pager.pagination({
            beforePageText: '第',//页数文本框前显示的汉字
            afterPageText: '页    共 {pages} 页',
            displayMsg: '第{from}到{to}条，共{total}条',
        });

    </script>
}